import { useEffect, useState } from 'react'
import Child from './Child'

const Counts = () => {
  const [count, setCount] = useState(0)
  const [userinfo, setName] = useState({
    name: '李四',
    age: '18',
  })
  const [countEffect, setCountEffect] = useState(0)
  // counts ++
  const countsAdd = () => {
    // setCount(count + 1)
    setCount(() => {
      //有一些复杂逻辑要处理的时候 就需要用到传函数的方式
      if (count > 4) {
        return count + 5
      } else {
        return count + 1
      }
    })
  }
  // 修改对象的属性
  const updateName = () => {
    setName(() => {
      return {
        ...userinfo,
        name: '张三',
      }
    })
  }
  // useEffect
  const updateCount = () => {
    setCountEffect(countEffect + 1)
    // console.log('获取更新后的数据点击时', countEffect) 点击时获取的数据比useEffect慢一条数据 相当于Vue的watch 实时更新数据
  }
  useEffect(() => {
    console.log('获取更新后的数据', countEffect)
  })
  return (
    <div>
      {count}
      <button onClick={countsAdd}> counts++ </button>&nbsp;&nbsp;
      <br />
      {userinfo.name}
      <button onClick={updateName}> 修改姓名 </button>
      <br />
      {/* useEffect */}
      <pre>
        useEffect
        可以传入2个参数，第1个参数为我们定义的执行函数，第2个参数是依赖关系(可选参数)。若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。
        第一个参数中的代码是组件挂载和更新就会执行的代码。
        <br />
        return 出去的代码会在组件卸载时才会执行。
        <br />
        依赖数组不是必填项，如果不传则每次渲染都会去执行，传值的话在依赖项发生改变时函数中的代码才会执行，如果传空数组则会在组件第一次挂载才会执行。
      </pre>
      countEffect: {countEffect}
      <button onClick={updateCount}>更新countEffect+1</button>
      <br />
      <Child initCount={10} />
    </div>
  )
}

export default Counts
